import {
  ProForm,
  ProFormSlider,
  ProFormSwitch,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page6: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>开关滑块表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="name"
          label="配置名称"
          placeholder="请输入配置名称"
          rules={[{ required: true, message: "请输入配置名称" }]}
        />

        <ProFormSwitch name="enableNotification" label="启用通知" />

        <ProFormSwitch name="enableSound" label="启用声音" />

        <ProFormSlider
          name="volume"
          label="音量"
          min={0}
          max={100}
          marks={{
            0: "0%",
            25: "25%",
            50: "50%",
            75: "75%",
            100: "100%",
          }}
        />

        <ProFormSlider
          name="brightness"
          label="亮度"
          min={0}
          max={100}
          range
          marks={{
            0: "暗",
            50: "适中",
            100: "亮",
          }}
        />
      </ProForm>
    </div>
  );
};

export default Page6;
